<style lang="scss">
  @import "./sass/var";
  @import "./sass/icon";
  @import "./sass/floor";
  @import "./sass/utilities";
  @import "./sass/activeable";

  $text-color: #C4C4C5;
  .item-container {
    position: relative;
    justify-content: space-between;
  }
  .down-icon {
    font-size: 50px;
    height: 40px;
    line-height: 40px;
    color: #a6a6a7;
    &-wrapper {
      width: 80px;
      text-align: center;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: 60px;
      right: 5px;
    }
  }
  .show-detail-btn {
    font-size: 30px;
    color: $text-color;
    margin-top: 30px;
  }
  .coupon {
    margin-top: 20px;
    &-btn {
      font-size: 40px;
      color: #eee;
      /*padding: 30 50;*/
      flex: 1;
      /*height: 100;*/
      text-align: center;
    }
    &-info {
      flex-direction: row;
      align-items: flex-end;
      justify-content: center;
    }
    &-title {
      font-size: 30px;
      color: #eee;
      padding-bottom: 5px;
    }
    &-y {
      font-size: 36px;
      color: $color-gold;
      padding-bottom: 5px;
    }
    &-val {
      font-size: 56px;
      color: $color-gold;
    }
  }
  .container {
    background-color: #161823;
  }

  .detail-container {
    padding: 20px;
    padding-top: 30px;
    width: 640px;
    background-color: #161823;
    flex: 1;
    justify-content: space-between;
    padding-bottom: 130px;
  }

  .right-bar {
    position: absolute;
    /*background-color: rgba(60, 60, 60, 0.29);*/
    width: 90px;
    border-radius: 20px;
    /*height: 700;*/
    right: 0;
    top: 780px;
    bottom: 220px;
    text-align: center;
    justify-content: space-between;
    &-icon {
      color: #F6F5F4;
      font-size: 60px;
      &-wrapper {
        align-items: center;
        justify-content: center;
      }
      &-text {
        color: #F6F5F4;
        font-size: 24px;
      }
    }
  }

  .value-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    margin-top: 20px;
  }
  .value-text {
    flex-direction: row;
    align-items: center;
    &-title {
      color: $text-color;
      font-size: 26px;
      font-weight: 300;
    }
    &-val {
      color: lighten($text-color, 20);
      font-size: 38px;
      font-weight: 300;
      &-sm {
        font-size: 28px;
        color: $text-color;
        font-weight: 300;
      }
    }
  }

  .item-title {
    position: relative;
    margin-bottom: 10px;
    &-text {
      font-size: 32px;
      color: $text-color;
      line-height: 38px;
      lines: 2;
      text-overflow: ellipsis;
    }

    &-icon {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .item-intro {
    /*padding: 20;*/
    font-size: 28px;
    color: $text-color;
    left: 0;
    right: 0;
    top: 0;
    margin-bottom: 10px;
  }
  .navbar {
    &-fixed {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
    }
    &-icon {
      $iconSize: 64px;
      font-size: 36px;
      color: #f1f1f1;
      background-color: rgba(40, 40, 40, 0.62);
      width: $iconSize;
      height: $iconSize;
      line-height: $iconSize;
      text-align: center;
      border-radius: $iconSize;
    }
    $height: 130px;
    height: $height;
    background-color: transparent;
    opacity: 1;
    padding: 0 30px;
    padding-top: 40px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transition: opacity .2s linear;

  }

  .item-img-slider {
    position: relative;
    height: 750px;
    width: 750px;
    &-indicator {
      height: 30px;
      item-color: white;
      item-selected-color: $color-primary;
      item-size: 15px;
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0
    }

  }

  .item-pic {
    width: 750px;
    height: 750px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }

  .favor-heart {
    color: #F53962
  }

</style>
<template>
  <div class="container" v-if="loaded">
    <div class="navbar navbar-fixed" ref="navbar">
      <text class="icon navbar-icon" @click="open('search.js')">&#xe651;</text>
      <text class="icon navbar-icon" @click="refreshSearch">&#xe65e;</text>
    </div>
    <ep-slider-v :slider-id="sliderId"
                 ref="epSlider"
                   :card-length='commissionItemList.length'
                   :containerS="{width: 750, height: screenHeight}"
                   :card-s="cardSize"
                   @wxcEpSliderCurrentIndexSelected="wxcEpSliderCurrentIndexSelected"
                   :select-index="0">
      <div class="item-container" v-for="(item, index) in commissionItemList" :slot="`card${index}_${sliderId}`" :key="index"
           :style="{height: screenHeight + 'px'}">
        <image resize="cover" class="item-pic" :src="item.picUrl"></image>
        <div class="detail-container" :style="{height: detailPanelHeight + 'px'}" >
          <text class="item-intro" v-if="item.description">{{item.description}}</text>
          <div class="item-title" v-if="!item.description">
            <image :src="platformIcon(item.ecomPlat)" class="item-title-icon"></image>
            <text class="item-title-text">      {{item.jdSale ? '【自营】' : (item.freeShipment ? '【包邮】' : '')}}{{item.title}}</text>
          </div>
          <div class="value-row">
            <div class="value-text">
              <text class="value-text-title">券后价: ¥</text>
              <text class="value-text-val">{{item.price.toFixed(1)}}</text>
            </div>
            <div class="value-text">
              <text class="value-text-title">原价: ¥</text>
              <text class="value-text-val-sm">{{item.originPrice.toFixed(1)}}</text>
            </div>
            <div class="value-text">
              <text class="value-text-title">月销: </text>
              <text class="value-text-val-sm">{{item.sales}}</text>
            </div>
          </div>
          <xcoupon dot-color="#161823" class="coupon" @rightClick="goToBuy(item)">
            <div slot="left">
              <div class="coupon-info">
                <text class="coupon-title">优惠券 </text>
                <text class="coupon-y">¥</text>
                <text class="coupon-val">{{item.couponValue.toFixed(0)}}</text>
              </div>
            </div>
            <div slot="right" class="">
              <text class="coupon-btn">领券</text>
            </div>
          </xcoupon>
        </div>
        <div class="right-bar">
          <div class="right-bar-icon-wrapper activeable">
            <text :class="['icon', 'right-bar-icon', item.favor && 'favor-heart']" @click="toggleFavor(item)">&#xe86f;</text>
          </div>
          <div class="right-bar-icon-wrapper activeable">
            <text class="icon right-bar-icon" @click="share(item)">&#xe8c6;</text>
            <text class="right-bar-icon-text text-gold">¥{{(item.shareCommission + item.rewardShareCommission).toFixed(1)}}</text>
          </div>
          <div class="right-bar-icon-wrapper activeable">
            <text :class="['icon', 'right-bar-icon', 'text-primary']" @click="open(`commission-item.js?id=${item.id}`)">&#xe62c;</text>
            <text class="right-bar-icon-text">详情</text>
          </div>
        </div>
      </div>
    </ep-slider-v>
    <wxc-loading :show="loadingShow"></wxc-loading>
    <sign :show="signShow" @signHide="signHide"></sign>
    <animation class="down-icon-wrapper" type="shakeDown" duration="1000" delay="1000">
      <text class="icon down-icon">&#xe62e;</text>
    </animation>
  </div>
</template>
<script>
import {WxcLoading} from 'weex-ui'
let api = require('./include/api')
let Deferred = require('Deferred')
let urlPath = require('./include/url-path')
let navigator = require('./include/xnavigator')
let queryparser = require('./include/queryparser')
let commissionItemTools = require('./include/commission-item-tools')
require('./include/page-xdom')
let config = require('./include/app-config')
const DEFAULT_ITEM_SEARCH_PARAM = {
  page: 1,
  sort: 'NONE',
  keywords: '',
  ecomPlat: '',
  startPrice: '',
  endPrice: '',
  channelIds: '',
  catIds: '',
  recommend: '',
  freeShipment: false,
  searchFrom: '',
  coupon: '',
  minSales: ''
}
module.exports = {
  mixins: [
  ],
  components: {
    'xcoupon': require('./components/xcoupon.vue'),
    'sign': require('./components/sign.vue'),
    'ep-slider-v': require('./components/ep-slider-v.vue'),
    WxcLoading,
    animation: require('./components/animation.vue')
  },
  props: {
  },
  data () {
    return {
      commissionItemList: [],
      item: {},
      hasNext: true,
      shopcatId: '',
      itemSearchParam: Object.assign({}, DEFAULT_ITEM_SEARCH_PARAM),
      containerStyle: {},
      loaded: false,
      searchFrom: '',
      searchFromTitle: '',
      detailPanelHeight: 0,
      screenHeight: 1300,
      signShow: false,
      loadingShow: false,
      sliderId: 1,
      currentIndex: 0,
      cardSize: {
        width: 750,
        height: 1300,
        spacing: 0,
        scale: 1
      }
    }
  },
  created () {
    config.bindConfig(this)
    let params = queryparser(weex.config.bundleUrl)
    if (params.keywords) {
      params.keywords = decodeURIComponent(params.keywords)
    }
    this.screenHeight = weex.config.env.deviceHeight * 750 / weex.config.env.deviceWidth
    this.cardSize.height = this.screenHeight
    this.detailPanelHeight = this.screenHeight - 750
    // 默认搜索本站点
    DEFAULT_ITEM_SEARCH_PARAM.searchFrom = params.searchFrom || ''
    this.searchFrom = DEFAULT_ITEM_SEARCH_PARAM.searchFrom
    Object.assign(DEFAULT_ITEM_SEARCH_PARAM, params)
    this.itemSearchParam = Object.assign({}, DEFAULT_ITEM_SEARCH_PARAM)
    Deferred.when(this.loadData(), this.searchItem()).always(() => {
      this.loaded = true
    })
  },
  methods: {
    loadData () {

    },
    refreshSearch () {
      this.resetSearchParam()
      this.loadingShow = true
      this.searchItem().done(() => {
        if (this.commissionItemList.length > 0) {
          this.$refs.epSlider.sliderToIndex(0)
        }
      }).always(() => {
        this.loadingShow = false
      })
    },
    resetSearchParam () {
      Object.assign(this.itemSearchParam, DEFAULT_ITEM_SEARCH_PARAM)
      this.hasNext = true
    },
    toggleSign () {
      this.signShow = !this.signShow
    },
    signHide () {
      this.signShow = false
    },
    searchItem (append, callback) {
      return api.search.commissionItem(this.itemSearchParam).done((rs) => {
        rs.data.results.forEach((item) => {
          item.favor = false
        })
        if (append) {
          this.commissionItemList = this.commissionItemList.concat(rs.data.results)
        } else {
          this.commissionItemList = rs.data.results
        }
        this.item = this.commissionItemList[0]
        let paging = rs.data
        this.hasNext = paging.hasNext
      }).always(() => {
        callback && callback()
      })
    },
    platformIcon (ecomPlat) {
      return urlPath.assets('images/icon/platform/' + ecomPlat + '.png')
    },
    commissionItemClick (item) {
      if (item.id) {
        navigator.push('commission-item.js?id=' + item.id)
      } else {
        navigator.push('commission-item.js?sourceItemId=' + item.sourceItemId + '&ecomPlat=' + item.ecomPlat)
      }
    },
    searchbarClick () {
      if (!this.searchFrom) {
        navigator.push('search.js')
      }
    },
    wxcEpSliderCurrentIndexSelected (e) {
      this.currentIndex = e.currentIndex
      if (e.currentIndex === this.commissionItemList.length - 3) {
        this.itemSearchParam.page++
        this.searchItem(true)
      }
    },
    open () {
      navigator.push.apply(navigator, Array.prototype.slice.call(arguments))
    },
    goToBuy (item) {
      let self = this
      commissionItemTools.goToBuy(item.id, {
        onRequest () {
          self.loadingShow = true
        }
      }).always(() => {
        this.loadingShow = false
      })
    },
    share (item) {
      commissionItemTools.share(item.id)
    },
    toggleFavor (item) {
      if (!item.favor) {
        api.footmark.favor({
          id: item.id
        }).done(rs => {
          item.favor = true
        })
        return
      }
      api.footmark.toggleFavor({
        id: item.id
      }).done(rs => {
        let flag = rs.data
        if (flag) {
          item.favor = true
        } else {
          item.favor = false
        }
      })
    }
  }
}
</script>

